<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <!-- style CSS -->
    <link rel="stylesheet" href="css/login.css" type="text/css" media="all">

    <!-- fontawesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all">
    <!-- google fonts -->
    <link href="//fonts.googleapis.com/css?family=Mukta:300,400,500" rel="stylesheet">
    <style>
        .main{
            padding: 0;
        }
    </style>
</head>
<body>
<section class="main">
    <div class="content-w3ls">
        <div class="text-center icon">
            <span class="fa fa-meetup"></span>
        </div>
        <div class="content-bottom">
            <div class="field-group">
                <span class="fa fa-user" aria-hidden="true"></span>
                <div class="wthree-field">
                    <input name="username" id="username" type="text" value="" placeholder="用户名(唯一)" required>
                </div>
            </div>
            <div class="field-group">
                <span class="fa fa-user" aria-hidden="true"></span>
                <div class="wthree-field">
                    <input name="nickname" id="nickname" type="text" value="" placeholder="昵称" required>
                </div>
            </div>
            <div class="field-group">
                <span class="fa fa-lock" aria-hidden="true"></span>
                <div class="wthree-field">
                    <input name="password" id="password" type="Password" placeholder="密码">
                </div>
            </div>
            <div class="field-group">
                <span class="fa fa-envelope" aria-hidden="true"></span>
                <div class="wthree-field">
                    <input name="email" id="email" type="email" value="" placeholder="邮箱" required>
                </div>
            </div>
            <div class="wthree-field">
                <button id="submit" type="submit" class="btn">提交</button>
            </div>
        </div>
    </div>
    <div class="copyright">
        <p>© 2020 Meetup signin form. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a> </p>
    </div>
</section>

<script src="js/jquery.min.js"></script>
<script>
    let username = $("#username");
    let password = $("#password");
    let email = $("#email");
    let nickname = $("#nickname");
    $("#submit").click(function () {
        if (username.val() == ''){
            alert("用户名不能为空");
            username.focus()
            return;
        }
        if (password.val() == ''){
            alert("密码不能为空");
            password.focus()
            return;
        }
        if (email.val() == ''){
            alert("邮箱不能为空");
            email.focus()
            return;
        }
        if (nickname.val() == ''){
            nickname.val(username.val())
        }
        $.ajax({
            url: 'user/register',
            method: 'post',
            data: {
                'username': username.val(),
                'password': password.val(),
                'nickname': nickname.val(),
                'email': email.val()
            },
            success: function (result) {
                if (result.state == 'SUCCESS'){
                    alert("注册成功")
                    window.location.href = 'login.html'
                }else if(result.state == 'EXIST'){
                    alert("用户名已存在")
                    username.focus()
                }else {
                    alert("注册失败, 请稍后重试")
                }
            },
            error: function () {
                alert("登录失败! 请检查网络连接是否正常")
            }
        })
    })
</script>

</body>
</html>